<template>
  <div class="home-hot-singer">
    <div class="box">
      <div class="item-box" v-for="item in hotSingerList" :key="item.id">
        <div class="content-box" @click=toSinger(item.id)>
          <!-- <van-image :src="item.img1v1Url+'?param=160y160'" fit="cover" round  lazy-load /> -->
          <img class="photoImg" v-lazy="item.img1v1Url+'?param=160y160'" />
          <p class="name">{{item.name}}</p>
          <div class="tag">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script  type='module'>

export default {
  name: 'HomeHotSinger',
  props: {
    hotSingerList: Array
  },
  methods: {
    // 点击首页歌手跳转到歌手详情页
    toSinger (SingerId) {
      if (!SingerId) {
        return this.$toast('没找到该歌手内容')
      }
      this.$router.push({ path: `/playmusic/${SingerId}` })
    }
  }
}
</script>

<style lang="less" scoped>
.home-hot-singer {
  .box {
    margin: 5px 6px;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    height: 423px;
    .item-box {
      width: 33.3333%;
      padding: 8px;
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
      justify-content: center;
      align-content: stretch;
      .content-box {
        padding: 10px 15px 2px 15px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #ddd;
        .photoImg {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .name {
          // margin-top: 5px;
          line-height: 24px;
          text-align: center;
          font-size: 12px;
          margin: 0px;
        }
        .tag {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          // border: #f00 solid 3px;
          position: absolute;
          right: 26px;
          bottom: 42px;
          // z-index: 999;
          color: #e4463b;
          background-image: url(../../../../public/imgs/logo.png);
          background-repeat: no-repeat;
          background-position: 2px 0px;
          background-size: 15px 15px;
          .iconfont {
            width: 100%;
            color: #e4463b;
          }
        }
      }
    }
  }
}
</style>
